<template>
  <div class="reason-contrast feature-out">
    <div class="filter-container">
      <el-date-picker
        v-model="datePicker"
        ref="pick"
        :clearable="false"
        size="small"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
      >
      </el-date-picker>
      <el-select
        v-model="listQuery.project"
        placeholder="项目名"
        clearable
        @change="projectChange"
        size="small"
        width="260px;"
        class="filter-item"
      >
        <el-option
          v-for="item in project_name"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.package"
        placeholder="策略名"
        clearable
        @change="packageChange"
        size="small"
        width="260px;"
        class="filter-item"
      >
        <el-option
          v-for="item in package_name"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.versions"
        placeholder="选择对比策略版本"
        clearable
        multiple
        :multiple-limit="10"
        collapse-tags
        size="small"
        width="260px;"
        class="filter-item"
      >
        <el-option
          v-for="item in selectVer"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.rejectCodes"
        placeholder="规则名"
        clearable
        filterable
        multiple
        collapse-tags
        size="small"
        width="360px;"
        class="filter-item"
      >
        <el-option
          v-for="item in reject_code"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        size="small"
        type="primary"
        @click="search"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        @click="handleReset"
      >
        重置
      </el-button>
    </div>
    <el-scrollbar>
      <el-table
        :data="listData"
        fit
        highlight-current-row
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column
          v-for="(item, index) in header"
          :key="index"
          :prop="item.key"
          :label="item.name"
          align="center"
          min-width="110px"
        ></el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { parseTimeJS as parseTime } from '@/utils'
import {
  getList,
  getSelectDown
} from '@/api/risksystem/strategy/reasonContrast'
import LineConfig from './reasonContrast/dashboardLine'
interface ListQuery {
  [propName: string]: any
}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private multipleLimit = 2
  private listData = []
  private header = []
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 30
  )
  private datePicker = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date())
  ]
  private selectVer = []
  private project_name = []
  private package_name = []
  private reject_code = []
  private searchTypes = ['version', 'project', 'package']
  private listQuery: ListQuery = {
    startDate: this.datePicker[0],
    endDate: this.datePicker[1],
    project: null,
    package: null,
    versions: null,
    rejectCodes: null
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.startDate = this.datePicker ? this.datePicker[0] : undefined
    this.listQuery.endDate = this.datePicker ? this.datePicker[1] : undefined
  }
  created() {
    // 最早可以调用vue组件method的钩子
    this.getList()
    this.getSelectDown({
      types: this.searchTypes
    })
  }
  private async getList() {
    console.log(this.listQuery)
    const { data } = await getList(this.listQuery)
    this.header = data.header
    this.listData = data.list
  }
  private handleReset() {
    this.datePicker = [
      this.formatDate(new Date(this.startDate)),
      this.formatDate(new Date())
    ]
    this.listQuery = {
      startDate: this.datePicker[0],
      endDate: this.datePicker[1],
      project: null,
      package: null,
      versions: null,
      rejectCodes: null
    }
    this.getList()
  }
  private async getSelectDown(types: any) {
    const { data } = await getSelectDown(types)
    this.selectVer = data.versions
    this.project_name = data.projects
    this.package_name = data.packages
    this.reject_code = data.rules
  }
  private projectChange() {
    this.getSelectDown({
      types: this.searchTypes,
      project: this.listQuery.project
    })
    this.listQuery.package = null
    this.listQuery.versions = null
    this.$message.warning('请选择策略名')
  }
  private packageChange() {
    this.getSelectDown({
      types: this.searchTypes,
      project: this.listQuery.project,
      package: this.listQuery.package
    })
    this.$message.warning('请选择策略对比版本')
    this.listQuery.versions = null
  }
  private search() {
    if (this.listQuery.project === null) {
      this.$message.warning('请选择项目名')
      return false
    }
    if (this.listQuery.package === null) {
      this.$message.warning('请选择策略名')
      return false
    }
    if (this.listQuery.versions.length === 0) {
      this.$message.warning('请选择对比策略版本')
      return false
    }
    this.getList()
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    // return year + '-' + month + '-' + date
    return (
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date)
    )
  }
}
</script>
<style scoped>
.reason-contrast {
  padding: 20px;
}
</style>
